<template>
    <el-form :model="form" label-width="120px">
        <el-form-item label="上级权限">
            <el-tree-select v-model="form.PARENT_ID" node-key="ID" :data="parentOptions" :render-after-expand="false"
                :show-checkbox="true" :check-strictly="true" :props="defaultProps" :default-expand-all="true"
                style="width:100%" placeholder="请选择">
                <template #default="{ data: { NAME } }">
                    {{ NAME }}
                </template>
            </el-tree-select>
        </el-form-item>
        <el-row>
            <el-col :span="10">
                <el-form-item label="权限代码">
                    <el-input v-model="form.CODE" />
                </el-form-item>
            </el-col>
            <el-col :span="14">
                <el-form-item label="权限名称">
                    <el-input v-model="form.NAME" />
                </el-form-item>
            </el-col>
        </el-row>


        <el-form-item label="图标">
            <div style="height:260px; overflow:auto; text-align:left">
                <el-row>
                    <el-col v-for="item in supportIcon" :span="4" style="border:1px solid #eee; text-align:center">
                        <div :class="form.ICON == item ? 'iconClassSelect' : 'iconClass'" @click="onSelectIcon(item)">
                            <div>
                                <el-icon size="large">
                                    <component :is="item" />
                                </el-icon>
                            </div>
                            <span style="font-size:12px;">{{ item }}</span>
                        </div>
                    </el-col>
                </el-row>

            </div>

        </el-form-item>
        <el-row>
            <el-col :span="10">
                <el-form-item label="权限类型">
                    <el-select v-model="form.IS_MENU" placeholder="请选择">
                        <el-option v-for="item in dictOptionsIsMenu" :key="item.VALUE" :label="item.TITLE"
                            :value="item.VALUE" />
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="7">
                <el-form-item label="权限状态">
                    <el-select v-model="form.STATE" placeholder="请选择" style="width:100%">
                        <el-option v-for="item in dictOptionsState" :key="item.VALUE" :label="item.TITLE"
                            :value="item.VALUE" />
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="7">
                <el-form-item label="顺序">
                    <el-input v-model="form.SORT" />
                </el-form-item>
            </el-col>
        </el-row>

        <el-row v-if="form.IS_MENU == '2'">
            <el-col :span="10">
                <el-form-item label="路由方式">
                    <el-select v-model="form.ROUTE_TYPE" placeholder="请选择">
                        <el-option v-for="item in dictOptionsRouteType" :key="item.VALUE" :label="item.TITLE"
                            :value="item.VALUE" />
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="14">
                <el-form-item label="路由地址">
                    <el-input v-model="form.ROUTE" />
                </el-form-item>
            </el-col>
        </el-row>


    </el-form>
</template>

<script lang="ts" setup>

import { ref, reactive, onMounted } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { deleteTreeNode, findNode } from '~/util/tree'

import * as ElementPlusIconsVue from '@element-plus/icons-vue'


/**
 * 编辑表单的内容
 */
const form = reactive({
    ID: '',
    PARENT_ID: '',
    CODE: '',
    NAME: '',
    LEVEL: '',
    ICON: '',
    IS_MENU: '',
    ROUTE_TYPE: '',
    ROUTE: '',
    STATE: '',
    SORT: '',
})

// 声明传入参数，editOpt：操作控制命令，包括type和data两个属性
const props = defineProps(['editOpt', 'parentTree'])

// 树状上级单位选择的展示属性
const defaultProps = {
    children: 'children',
    label: 'NAME',
}
const parentOptions = reactive([]);

// 处理字典项
import { loadDictList } from '~/util/dict'
const dictOptionsIsMenu = ref([]);
loadDictList('SYSTEM_MENU_TYPE', (list: []) => {
    dictOptionsIsMenu.value = list;
});
const dictOptionsRouteType = ref([]);
loadDictList('SYSTEM_MENU_OPENTYPE', (list: []) => {
    dictOptionsRouteType.value = list;
});
const dictOptionsState = ref([]);
loadDictList('SYSTEM_MENU_STATE', (list: []) => {
    dictOptionsState.value = list;
});

// 支持的ICON
const supportIcon = reactive([]);

onMounted(() => {

    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
        supportIcon.push(key);
    }

    if (props.editOpt.type == 'modify') {
        // 构建数据
        for (let key in props.editOpt.data) {
            form[key] = props.editOpt.data[key];
        }
    } else {
        // 清空数据
        for (let key in form) {
            form[key] = null;
        }
        form.STATE = '1';
    }

    var tempTree = JSON.parse(JSON.stringify(props.parentTree));
    for (var i = 0; i < tempTree.length; i++) {
        parentOptions.push(tempTree[i]);
    }
    deleteTreeNode(parentOptions, "ID", form.ID)

})

const onSelectIcon = (selectIcon: string) => {
    form.ICON = selectIcon;
}

/**
 * 用户单击确定按钮后，List页面将触发事件，调用本方法处理业务逻辑 
 */
const confirm = (successCallback: any) => {

    let saveParm = {};
    for (let key in form) {
        if (form[key] == null) {
            // 忽略空值
            continue;
        }

        saveParm[key] = form[key];
    }

    // 构建当前节点的level
    if (form.PARENT_ID == null || form.PARENT_ID == "") {
        saveParm.LEVEL = 1;
    } else {
        var parentItem = findNode(parentOptions, "ID", form.PARENT_ID);
        saveParm.LEVEL = (parentItem.data.LEVEL + 1);
    }


    axios.post("api/sys/function/save", saveParm).then(res => {
        if (res.data.code == "200") {
            //请添加执行成功后的业务代码 
            ElMessage.success('保存成功')
            successCallback();
        } else {
            // 错误消息为：res.data.msg 
            // 请添加执行失败后的业务代码 
            ElMessage.error(res.data.msg)
        }
    });
}

/**
 *
 * 用户单击取消按钮后，List页面将触发事件，调用本方法处理关闭业务逻辑，若不声明则将直接关闭
const beforClose = (successCallback:any) => {
    console.log('此处可处理关闭前的业务逻辑');
    successCallback();
}
*/
defineExpose({ confirm })

</script>

<style>
.iconClass {
    line-height: 18px;
    padding: 10px;
    cursor: pointer;
    background: white;
    color: #333;
}

.iconClass:hover {
    background: #2597b9;
    color: white;
}

.iconClassSelect {
    line-height: 18px;
    padding: 10px;
    cursor: pointer;
    background: #2597b9;
    color: white;
}
</style>
